<template>
    <div>
        <BreadCrumb></BreadCrumb>

        <!-- 查询区域 -->
        <div class="head">
            <el-form ref="isForm" :inline="true" :model="formQuery" class="demo-form-inline" size="mini">
                <el-row :gutter="10">
                    <el-col :span="6">
                        <el-form-item label="汇总单编号" prop="hzBianhao">
                            <el-input v-model="formQuery.hzBianhao" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="汇总时间">
                            <el-col :span="11">
                                <el-form-item prop="bingTime">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="formQuery.bingTime"
                                        style="width: 100%;"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="2" style="text-align: center;">至</el-col>
                            <el-col :span="11">
                                <el-form-item prop="endTimg">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="formQuery.endTimg"
                                        style="width: 100%;"></el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button type="primary" @click="getQueryLists" icon="el-icon-search">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="reset">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10" style="width: 76%;">
                    <el-col :span="8">
                        <el-form-item label="汇总人" prop="hzPerson">
                            <el-input v-model="formQuery.hzPerson" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="联系电话" prop="phoneNumber">
                            <el-input v-model="formQuery.phoneNumber" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="汇总单总价格" prop="totalPrice">
                            <el-input v-model="formQuery.totalPrice" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="btn-box">
                <!-- 导出下载表格 -->
                <download-excel :data="excelData" :fields="json_fields" header="生鲜后台管理系统"
                    name="汇总订单表格.xls">
                    <el-button type="warning" @click="exportOrder" size="small">导出</el-button>
                </download-excel>
            </div>
        </div>
        <!-- 内容区域 -->
        <div class="content">
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                @select="handleSelectionChange" @select-all="handleSelectionChange" :border="true"
                header-cell-class-name="active-head" cell-class-name="row-style">
                <el-table-column type="index" width="55" />
                <el-table-column type="selection" width="55" />
                <el-table-column prop="hzBianhao" label="汇总单编号" />
                <el-table-column prop="hzPerson" label="汇总人" />
                <el-table-column prop="phoneNumber" label="联系电话" />
                <el-table-column prop="hzTime" label="汇总时间" />
                <el-table-column prop="totalPrice" label="汇总单总价格" />
                <el-table-column fixed="right" label="操作">
                    <template slot-scope="{row}">
                        <el-button @click="revoke(row)" type="danger" size="small">撤销汇总</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="paginat rbt">
                <Paginats :total="total" :page-size="pageSize" @handleCurrentChange="handleCurrentChange"></Paginats>
            </div>
        </div>
    </div>
</template>
<script>
import Paginats from '@/components/pagination/pagination.vue'
import { getHZLists, postHZRevok } from '@/api/request/order/index'
export default {
    name: 'order-collect-page',
    components: {
        Paginats
    },
    data() {
        return {
            formQuery: {
                hzBianhao: '',
                bingTime: '',
                endTimg: '',
                hzPerson: '',
                totalPrice: '',
                phoneNumber: '',
            },
            tableData: [],
            pageSize: 10,
            total: 0,
            currentPage: 1,
            excelData:[],
            json_fields:{
                '汇总单编号':'hzBianhao',
                '汇总人':'hzPerson',
                '联系电话':'phoneNumber',
                '汇总时间':'hzTime',
                '汇总单总价格':'totalPrice'
            }

        }
    },
    created() {
        this.getQueryLists()
    },
    methods: {
        async getQueryLists() {
            let params = { pageNumber: this.currentPage, pageSize: 10, ...this.formQuery }
            console.log('params====', params);
            const res = await getHZLists('/getHZList', params)
            if (res.code != 200) return this.$message.error('error')
            this.tableData = res.datas
            this.total = res.total
        },
        reset() {
            this.$refs.isForm.resetFields()
        },
        exportOrder() {
            this.excelData = this.tableData
        },
        handleCurrentChange(page) {
            this.currentPage = page
            this.getQueryLists()
        },
        handleSelectionChange(items) {
            console.log(items);
        },
        revoke(row) {
            this.$confirm('确定撤销汇总?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await postHZRevok('/hzRevoke', { row })
                if (res.code != 200) return this.$message.error('error')
                this.getQueryLists()
                this.$message.success('success')
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        }
    }
}
</script>
<style scoped lang="less">
.content {
    background-color: #fff;

    /deep/ .active-head {
        color: #333;
        text-align: center;
    }

    /deep/ .row-style {
        text-align: center;
    }

    .gd-name {
        cursor: pointer;
        color: #1E90FF;
    }
}

.rbt {
    text-align: right;
}
</style>